<template>
  <div class="decoration">
    <div class="decoration-item">
      <dv-decoration-9>{{ props.value }}{{ props.uom }}</dv-decoration-9>
    </div>
    <div class="decoration-title" v-if="props.title">{{ props.title }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  uom: {
    type: String,
    default: '%'
  },
  title: {
    type: String,
    default: ''
  }
})
</script>
<style lang="less" scoped>
.decoration {
  height: 100%;
  .decoration-item {
    height: calc(100% - 20px);
    padding: 5px;
    .dv-decoration-9 {
      width: 110px;
      // height: calc(100% - 25px - 10px - 20px);
      height: 100%;
    }
  }
  .decoration-title {
    text-align: center;
    line-height: 20px;
    // color: rgba(6, 153, 206, 1);
  }
}
</style>
